import React, { useState, useRef } from 'react';
// 引入 Tesseract.js，若用 npm 安装需这样引入
import Tesseract from 'tesseract.js';

const OCRComponent = () => {
    // 用于存储选择的文件
    const [selectedFile, setSelectedFile] = useState(null);
    // 图片预览的 DataURL
    const [imagePreview, setImagePreview] = useState('');
    // OCR 识别结果
    const [ocrResult, setOcrResult] = useState('');
    // 识别进度，0 - 100
    const [recognitionProgress, setRecognitionProgress] = useState(0);
    // 识别状态，用于控制按钮禁用等
    const [isRecognizing, setIsRecognizing] = useState(false);
    // 文件选择框的 ref
    const fileInputRef = useRef(null);

    // 处理文件选择变化
    const handleFileChange = (e) => {
        const file = e.target.files[0];
        if (file) {
            setSelectedFile(file);
            const reader = new FileReader();
            reader.onload = (event) => {
                setImagePreview(event.target.result);
                setOcrResult(''); // 重置之前的识别结果
            };
            reader.readAsDataURL(file);
        }
    };

    // 执行 OCR 识别的异步函数
    const recognizeText = async () => {
        if (!selectedFile) {
            alert('请先选择要识别的图片');
            return;
        }
        setIsRecognizing(true);
        setRecognitionProgress(0);
        setOcrResult('');

        try {
            // 加载中文简体 chi_sim 语言包，指定 langPath
            const { data } = await Tesseract.recognize(
                imagePreview,
                'chi_sim', // 指定中文简体
                {
                    langPath: '/tessdata', // 指向 public/tessdata 目录
                    gzip: false, // 明确不加载.gz
                    logger: m => {
                        if (m.status === 'recognizing text') {
                            setRecognitionProgress(Math.round(m.progress * 100));
                        }
                    }
                }
            );
            setOcrResult(data.text || '未识别到有效文本');
        } catch (error) {
            console.error('OCR 识别出错:', error);
            setOcrResult('识别失败，请检查图片或重试');
        } finally {
            setIsRecognizing(false);
        }
    };

    return (
        <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
            <h1 style={{ textAlign: 'center' }}>OCR 图文识别（Tesseract.js）</h1>
            <input
                type="file"
                accept="image/*"
                ref={fileInputRef}
                onChange={handleFileChange}
                style={{ display: 'block', marginBottom: '10px' }}
            />
            <button
                onClick={() => fileInputRef.current.click()}
                style={{ marginBottom: '20px' }}
            >
                选择图片
            </button>
            {imagePreview && (
                <div style={{ marginBottom: '20px' }}>
                    <img
                        src={imagePreview}
                        alt="Preview"
                        style={{ maxWidth: '100%', height: 'auto' }}
                    />
                </div>
            )}
            <button
                onClick={recognizeText}
                disabled={isRecognizing || !selectedFile}
                style={{ marginBottom: '20px' }}
            >
                {isRecognizing ? '识别中...' : '开始识别'}
            </button>
            {isRecognizing && recognitionProgress > 0 && (
                <div style={{ marginBottom: '20px' }}>
                    <p>识别进度：{recognitionProgress}%</p>
                    <div
                        style={{
                            width: '100%',
                            height: '20px',
                            backgroundColor: '#eee',
                            borderRadius: '4px',
                            overflow: 'hidden',
                        }}
                    >
                        <div
                            style={{
                                height: '100%',
                                backgroundColor: '#007bff',
                                width: `${recognitionProgress}%`,
                            }}
                        ></div>
                    </div>
                </div>
            )}
            {ocrResult && (
                <div>
                    <h2>识别结果：</h2>
                    <p>{ocrResult}</p>
                </div>
            )}
        </div>
    );
};

export default OCRComponent;